<template>
    <div ref="myChart" style="width: 100%;height: 100%;box-sizing: border-box;"></div>
</template>

<script>
    // 引入基本模板
    let echarts = require('echarts/lib/echarts')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');

    // 引入饼状图组件
    require('echarts/lib/chart/pie')
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip')
    require('echarts/lib/component/title')

    export default {
        mounted() {
            this.drawLine();
        },
        data() {
            return {

            }
        },
		watch: {
			data(newValue, oldValue) {
				this.drawLine();
			}
		},
        props: {
            data: {
                type: Array
            },
            colorlist: {
                type: Array,
                default: function() {
                    return ["#49c7ad", "#ffa55b", "#4a90e2"]
                }
            }
        },
        computed: {

        },
        methods: {
            drawLine() {
                //实例存在则消除
                let chart = echarts.getInstanceByDom(this.$refs.myChart)
                if (chart) {
                    chart.dispose()
                }

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(this.$refs.myChart)
                
                var data = this.data
                var colorlist = this.colorlist
                

                var option = {
                    legend: {
                        top: "85%",
                        itemWidth: 10,
                        itemHeight: 10,
                        textStyle: {
                            color: "#fff",
                            fontSize: "12"
                        }
                    },
                    tooltip: {
                        trigger: "item",
                        formatter: "{b} : {c} ({d}%)"
                    },
                    color: colorlist,
                    series: [{
                        type: "pie",
                        // 如果radius是百分比则必须加引号
                        radius: [0, "60%"],
                        center: ["50%", "45%"],
                        data: data,
                        // 修饰饼形图文字相关的样式 label对象
                        label: {
                            fontSize: 10
                        },
                        // 修饰引导线样式
                        labelLine: {
                            // 连接到图形的线长度
                            length: 10,
                            // 连接到文字的线长度
                            length2: 10
                        }
                    }]
                };



                myChart.setOption(option);
            }
        }
    }
</script>

<style>
</style>
